<template>
  <div class="table-data-view warpper">
    <div class="breadcrumb-view">
      <div class="breadcrumb-title">{{ $t($route.meta.title) }}</div>
    </div>
    <div class="info_title">
      <p>个人消息</p>
    </div>
    <div class="info_tab">
      <span :class="isShowInfotab ? 'active_span' : ''" @click="changeTab(true, 'message')">未读消息</span>
      <span :class="isShowInfotab ? '' : 'active_span'" @click="changeTab(false, 'message')">已读消息</span>
    </div>
    <el-row class="search" :gutter="10">
      <el-col :span="10">
        <el-input clearable placeholder="请输入关键字" v-model="serachMessageObj.searchData">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
      <el-col :span="3" :push="9">
        <el-button v-if="isShowInfotab" type="primary" icon="el-icon-plus">全部已读</el-button>
        <div v-else style="width:100%;height:40px"></div>
      </el-col>
      <el-col :span="2" :push="9">
        <el-button icon="el-icon-refresh-left">重置</el-button>
      </el-col>
    </el-row>
    <table-list ref="tableView" class="table-list-view" :tableConfig="tableConfig" :tableData="tableData"></table-list>
    <!-- 系统公告 -->
    <div class="info_title">
      <p>系统公告</p>
    </div>
    <div class="info_tab">
      <span :class="isShowSystem ? 'active_span' : ''" @click="changeTab(true, 'system')">未读</span>
      <span :class="isShowSystem ? '' : 'active_span'" @click="changeTab(false, 'system')">已读</span>
    </div>
    <el-row class="search" :gutter="10">
      <el-col :span="10">
        <el-input clearable placeholder="请输入关键字">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
      <el-col :span="3" :push="9">
        <el-button v-if="isShowSystem" type="primary" icon="el-icon-plus">全部已读</el-button>
        <div v-else style="width:100%;height:40px"></div>
      </el-col>
      <el-col :span="2" :push="9">
        <el-button icon="el-icon-refresh-left">重置</el-button>
      </el-col>
    </el-row>
    <table-list ref="tableView" class="table-list-view" :tableConfig="tableConfig" :tableData="tableData"></table-list>
  </div>
</template>

<script>
  import {
    getUserMessage,
    getSystemNotice
  } from "@/api/centerApi.js";

  export default {
    data() {
      return {
        isShowInfotab: true, //是否显示个人消息全部已读按钮
        isShowSystem: true, //是否显示系统公告全部已读按钮
        tableConfig: {}, //个人消息表格配置对象
        tableData: [], //个人消息表格数据
        serachMessageObj: {
          current: 1,
          lookState: "0", //是否查看 0未查看 1已查看
          searchData: "", //搜索关键字
          size: 5
        },
        serachSystemObj: {  // 获取系统公告接口参数
          lookState: "0", //是否已读
          pageNow: 1,
          pageSize: 10
        }
      };
    },
    created() {
      //系统公告表格基础配置
      this.getCenterInfo();
    },
    methods: {
      // 已读和未读消息的切换
      changeTab(val, type) {
        if (type == "message") {
          this.isShowInfotab = val;
          if (val) {
            this.serachMessageObj.lookState = "0";
          } else {
            this.serachMessageObj.lookState = "1";
          }
        } else if (type == "system") {
          this.isShowSystem = val;
          if (val) {
            this.serachSystemObj.lookState = "0";
          } else {
            this.serachSystemObj.lookState = "1";
          }
        }
      },
      // 获取个人消息信息表格
      getCenterInfo() {
        getUserMessage().then(res => {
          console.log(res, "蚂蚁雅黑");
        });
      }
    },
    components: {
      tableList: () => import("@/components/common_tables.vue")
    }
  };
</script>

<style scoped lang="scss">
  .el-divider {
    height: 2px;
    margin: 0;
  }

  .info_title {
    margin-top: 40px;

    p {
      font-size: 18px;
      height: 14px;
      color: #303133;
      font-weight: 540;
    }
  }

  .info_tab {
    height: 40px;
    border-bottom: #dcdfe6 1px solid;
    margin-top: 30px;

    span {
      font-size: 14px;
      height: 40px;
      width: 100px;
      display: block;
      float: left;
      text-align: center;
      line-height: 40px;
      background: #fff;
      cursor: pointer;
    }

    .active_span {
      border-top: #dcdfe6 1px solid;
      border-right: #dcdfe6 1px solid;
      border-left: #dcdfe6 1px solid;
      border-bottom: #fff 1px solid;
    }
  }

  .search {
    margin-top: 14px;
  }
</style>
